<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

    <style>
        html,body{
            width: 100%;
            height: 100%;
            padding: 0;
            margin: 0;
            overflow: scroll;
        }




        .el-header, .el-footer {
            /*background-color: #B3C0D1;*/
            color: #333;
            /*text-align: center;*/
            /*height: 40px;*/
        }

        .el-aside {
            background-color: #D3DCE6;
            color: #333;
            text-align: center;
        }

        .el-main {
            background-color: #E9EEF3;
            color: #333;
            text-align: center;
        }
    </style>
</head>
<body>
<div id="app" style="width: 100%;height: 100%;">
    <el-container>
        <el-header style="text-align: right;margin-right: 20px;">
            <el-button type="text" @click="dialogFormVisible = true">添加</el-button>
            <el-dialog fullscreen="true" title="成员信息" :visible.sync="dialogFormVisible" style="text-align: left!important;" >
                <el-form :model="form">
                    <el-form-item label="成员ID" :label-width="formLabelWidth">
                        <el-input v-model="form.userid" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="成员名字" :label-width="formLabelWidth">
                        <el-input v-model="form.username" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="成员密码" :label-width="formLabelWidth">
                        <el-input v-model="form.userpassword" autocomplete="off"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="addPerson()">确 定</el-button>
                </div>
            </el-dialog>
        </el-header>
        <el-mian width="80%">
            <template>
                <el-table
                        :data="tableData"
                        style="width: 100%">
                    <el-table-column
                            prop="userid"
                            label="ID"
                            width="240">
                    </el-table-column>
                    <el-table-column
                            prop="userrole"
                            label="职位"
                            width="240">
                    </el-table-column>
                    <el-table-column
                            prop="username"
                            label="姓名"
                            width="*">
                    </el-table-column>

                    <el-table-column width="180">
                        <template slot-scope="scope">
                            <el-button @click="edit(scope.row)" type="primary" icon="el-icon-edit" size="small"></el-button>
                            <!--                            页面已完成 只差数据保存删除的操作-->
                            <el-dialog fullscreen="true" title="成员信息" :visible.sync="dialogFormVisible1" style="text-align: left!important;" >
                                <el-form :model="form1">
                                    <el-form-item label="成员ID" :label-width="formLabelWidth">
                                        <el-input v-model="form1.userid" autocomplete="off" readonly></el-input>
                                    </el-form-item>
                                    <el-form-item label="成员名字" :label-width="formLabelWidth">
                                        <el-input v-model="form1.username" autocomplete="off"></el-input>
                                    </el-form-item>
                                    <el-form-item label="成员密码" :label-width="formLabelWidth">
                                        <el-input v-model="form1.userpassword" autocomplete="off"></el-input>
                                    </el-form-item>
                                    <el-form-item label="职位" :label-width="formLabelWidth" th:if="${user.getUserrole()} eq  'SYSTEM'">
                                        <el-select v-model="form1.userrole" placeholder="请选择职位">
                                            <el-option label="系统管理员" value="SYSTEM"></el-option>
                                            <el-option label="销售管理员" value="SALE"></el-option>
                                            <el-option label="仓库管理员" value="REPOSITORY"></el-option>
                                            <el-option label="销售人员" value="STAFF"></el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-form>
                                <div slot="footer" class="dialog-footer">
                                    <el-button @click="dialogFormVisible1 = false">取 消</el-button>
                                    <el-button type="primary" @click="dialogFormVisible1 = false,fixPerson()">确 定</el-button>
                                </div>
                            </el-dialog>
                            <el-button @click="open(scope.$index,scope.row.userid)" type="danger" icon="el-icon-delete" size="small"></el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </template>
        </el-mian>

    </el-container>

</div>


<script>
    let app = new Vue({
        el: '#app',
        data() {
            return {
                // 到时调用数据库 直接调用数据
                role: '',
                tableData: [],
                dialogVisible: false,
                dialogFormVisible: false,
                dialogFormVisible1: false,
                // 表单内容稍后再改
                form: {
                    userid:'',
                    username: '',
                    userrole: 'STAFF',
                    userpassword:''
                },
                formLabelWidth: '120px',
                form1: '',
            }
        },
        watch: {
            'form.userid':{
                handler (newValue, oldValue) {
                    if(this.form.userid.length>7){
                        this.$message({
                            message:'ID不能超过7个字符',
                            type:'danger'
                        })
                    }
                },
            },
        },
        created:function () {
            this.getUserList();
            this.getUserRole();
        },
        methods: {
            getUserRole(){
                axios.post('/member/getUserRole'
                ).then(function (res) {
                    this.role = res.data;
                })
            },
            handleOpen(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                console.log(key, keyPath);

            },
            getUserList(){
                axios.post('/member/getListOfUser',
                    "currentPage=1&pageSize=100"
                ).then(function (res) {
                    console.info(res.data);
                    // let list = JSON.parse(res.data);
                    let list = res.data;
                    let bufferList = [];
                    if(this.role == 'SYSTEM'){
                        for(let key in list){
                            let i = new Object();
                            i.userid = list[key].userid;
                            i.username = list[key].username;
                            i.userpassword = list[key].userpassword;
                            i.userrole = list[key].userrole;
                            bufferList.push(i);
                        }
                        app.tableData = bufferList;
                        console.info(app.tableData);
                    }
                    else if(this.role == 'SALE'){
                        for(let key in list){
                            let i = new Object();
                            i.userid = list[key].userid;
                            i.username = list[key].username;
                            i.userpassword = list[key].userpassword;
                            i.userrole = list[key].userrole;
                            if(i.userrole == 'STAFF'||i.userrole == 'SALE'){
                                bufferList.push(i);
                            }
                        }
                        app.tableData = bufferList;
                        console.info(app.tableData);
                    }

                }).catch(function (error) {
                    console.log(error);
                });
            },
            edit(row){
                this.dialogFormVisible1 = true;
                console.log(row);
                this.form1 = row;
            },
            fixPerson(){
                axios.post('/member/fixPerson',
                    "userId="+this.form1.userid+
                    "&userName="+this.form1.username+
                    "&password="+this.form1.userpassword+
                    "&role="+this.form1.userrole
                ).then(function (res) {
                    console.info(res.data);
                }).catch(function (error) {
                    console.log(error);
                });
            },

            addPerson(){
                if(this.form.userid.length>7){
                    this.$message({
                        message:'ID不能超过7个字符',
                        type:'danger'
                    });
                    return;
                }
                axios.post('/member/addPerson',
                    "userId="+this.form.userid+
                    "&userName="+this.form.username+
                    "&password="+this.form.userpassword+
                    "&role="+this.form.userrole
                ).then(function (res) {
                    console.info(res.data);
                    if (res.data==='添加成功'){
                        app.dialogFormVisible = false;
                        let i = new Object();
                        i.userid = app.form.userid;
                        i.username = app.form.username;
                        i.userpassword = app.form.userpassword;
                        i.userrole = app.form.userrole;
                        app.tableData.push(i);
                        // app.addSuccess();
                        this.location.reload();
                        app.form.userid='';
                        app.form.username='';
                        app.form.userpassword='';
                        app.form.userrole='STAFF';
                    }
                    else if(res.data==='该账户已存在'){
                        app.addFail();
                    }
                }).catch(function (error) {
                    console.log(error);
                });

            },
            deletePerson(index,id){
                axios.post('/member/deletePerson',
                    "userId="+id
                ).then(function (res) {
                    console.info(res.data);
                    // alert(index);
                    if(res.data==='删除成功'){
                        app.tableData.splice(index, 1);
                        // app.deleteSuccess();
                    }
                }).catch(function (error) {
                    console.log(error);
                });

            },
            addSuccess(){
                this.$message({
                    message:'添加成功',
                    type:'success'
                });
            },
            addFail(){
                this.$message({
                    message:'该账户已存在',
                    type:'danger'
                });
            },
            deleteSuccess(){
                this.$message({
                    message: '删除成功',
                    type:'success'
                })
            },
            // 点开删除按钮时弹出的确定框
            open(index,id) {
                this.$confirm('此操作将永久删除该成员, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    app.deletePerson(index,id);
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
        }
    })


</script>

</body>
</html>
